import React from 'react'

const Info = () => {

    let navigate = React.$Router.useNavigate();

    const [info, setInfo] = React.useState({
        product: {},
        business: {},
        express: {},
    })

    // 获取Cookie
    let Cookie = React.$Cookies.load('LoginUser',{path:'/'}) ? JSON.parse(React.$Cookies.load('LoginUser',{path:'/'})) : {}

    const [LoginUser, setLoginUser] = React.useState(Cookie)

    // 获取到路由传参，传参数
    let [searchParams] = React.$Router.useSearchParams();
    const [id, setId] = React.useState(searchParams.get('id'))
    const [tel, setTel] = React.useState('')

    React.useEffect(() => {
        getInfoData()
    }, [])

    const getInfoData = async () => {
        let data = {
            id: id
        }
        let result = await React.$Api.LeaseInfo(data)
        if (result.code === 1) {
            setInfo(result.data.info)
            setTel(result.data.tel)
        }

    }

    const back = () => {
        navigate('/lease/lease/index')
    }

    const contact = () => {
        React.$Vant.Dialog.confirm({
            title: "拨打电话",
            message: "是否确认拨打官方客服热线",
        }).then(() => {
            //拨打电话
            window.location.href = `tel:${tel}`
        })
            .catch(() => { })
    }

    const Express = () => {
        if (info.status >= 2) {
            return (
                <>
                    <li>配送方式：<span>{info.express.name}</span></li>
                    <li>配送单号：<span>{info.expcode}</span></li>
                    <li className="no">配送地址：<span>{info.address}</span></li>
                </>
            )
        }
    }

    const Comment = () => {
        if (info.status == 6) {
            return (
                <>
                    <li>评分：<React.$Vant.Rate value={info.rate} readonly /></li>
                    <li className="no">评论内容：<span>{info.comment}</span></li>
                </>

            )
        }
    }

    return (
        <>
            {/* 导航栏 */}
            <React.$Vant.Sticky>
                <React.$Vant.NavBar
                    title="订单详情"
                    onClickLeft={back}
                    zIndex="10"
                />
            </React.$Vant.Sticky>


            <div className="zy_module_content">
                <div className="swiper-container vip_user_order">
                    <div className="swiper-slide">
                        <ul>
                            <li style={{ borderBottom: 'none' }}>
                                <div className="vip_order_goods">
                                    <h3>
                                        <React.$Router.NavLink to={`/product/product/info?pid=${22}`}>
                                            <i><img src={info.product.thumbs_text} /></i>
                                            <dl>
                                                <dt>{info.product.name}</dt>
                                                <dd>
                                                    <em>押金</em>
                                                    <em>{info.rent}</em>
                                                </dd>
                                                <dd>
                                                    <em>总价</em>
                                                    <em>{info.price}</em>
                                                </dd>
                                                <dd>
                                                    <em>结束时间</em>
                                                    <em>{info.endtime_text}</em>
                                                </dd>
                                                <dd>
                                                    <em>订单状态</em>
                                                    <em>{info.status_text}</em>
                                                </dd>
                                            </dl>
                                        </React.$Router.NavLink>
                                    </h3>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div className="lianxi_ge">
                <a onClick={contact}>联系客服</a>
            </div>
            <div className="rem2"></div>

            <div className="xiangq_xiaox">
                <ul>
                    <li>联系人：<span>{info.business.nickname}</span></li>
                    <li>性别：<span>{info.business.sex_text}</span></li>
                    <li>联系电话：<span>{info.business.mobile}</span></li>
                    <li>下单时间：<span>{info.createtime}</span></li>
                    <li className="no">支付方式：<span>在线支付</span></li>
                    <Express />
                    <Comment />

                </ul>
            </div>
            <div className="rem2"></div>

            <div className="nimen_er">
                <p>证件照片</p>
                <div className='card'>
                    <img src={info.card_text} alt="" />
                </div>
            </div>
            <div className="rem2"></div>

            <div className="xq_money">
                <p>押金<span className="color">￥{info.rent}</span></p>
                <p>租金<span>￥{info.price - info.rent}</span></p>
                <div>
                    <p><span>合计：<b className="color">￥{info.price}</b></span></p>
                </div>
            </div>
        </>
    )
}

export default Info